<template>
  <div>
    <el-button
      type="primary"
      style="margin-left: 20px; margin-top: 10px"
      class="butt"
      @click="addMenu"
      size="mini"
      icon="el-icon-plus"
      >添加公告</el-button
    >
    <el-table
      ref="multipleTable"
      :data="tableData"
      tooltip-effect="dark"
      :header-cell-style="{ background: '#F9FAFC', color: '#222' }"
      stripe
      border
      :row-style="{ height: '0px' }"
      :cell-style="{ padding: '0px' }"
      style="margin-top: 20px"
      @selection-change="handleSelectionChange"
    >
      <el-table-column
        prop="officeName"
        show-overflow-tooltip
        label="功能名称"
        min-width="200"
      ></el-table-column>
      <el-table-column
        prop="oemName"
        show-overflow-tooltip
        label="业务标识"
        min-width="200"
      ></el-table-column>
      <el-table-column
        prop="busName"
        show-overflow-tooltip
        label="是否跳转链接"
        min-width="200"
      ></el-table-column>
      <el-table-column
        prop="brandChannelName"
        show-overflow-tooltip
        label="状态"
        min-width="200"
      ></el-table-column>
      <el-table-column min-width="190" label="操作" show-overflow-tooltip>
        <template slot-scope="scope">
          <el-button
            type="text"
            size="mini"
            v-if="jurisdiction != 2"
            @click="checks(scope.row)"
            >修改</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="jumpUrl"
            >配置</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="check(scope.row)"
            >上移</el-button
          >
          <el-button
            type="text"
            size="mini"
            @click="check(scope.row)"
            >下移</el-button
          >
        </template>
      </el-table-column>
    </el-table>

    <!-- 创建弹框 -->
    <el-dialog
      title="添加菜单"
      :visible.sync="dialogVisible"
      width="450px"
      :before-close="handleClose"
    >
      <div class="box">
        <el-form
          :label-position="labelPosition"
          label-width="120px"
          :model="formLabelAlign"
        >
          <el-form-item label="功能名称">
            <el-input v-model="formLabelAlign.name"></el-input>
          </el-form-item>
          <el-form-item label="业务标识">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务类型">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="业务订单名称">
            <el-select v-model="value" placeholder="请选择">
              <el-option
                v-for="item in options"
                :key="item.value"
                :label="item.label"
                :value="item.value"
              >
              </el-option>
            </el-select>
          </el-form-item>
          <el-form-item label="是否有子菜单">
            <el-input v-model="formLabelAlign.type"></el-input>
          </el-form-item>
          <el-form-item label="上传图标">
            <div>
              <el-upload
                :action="httpurl + '/api/fileUpload'"
                list-type="picture-card"
                :limit="1"
                :on-preview="handlePictureCardPreview"
                :on-remove="handleRemove"
                :before-upload="beforeAvatarUpload"
              >
                <i class="el-icon-plus"></i>
              </el-upload>
              <el-dialog :visible.sync="dialogVisible1" append-to-body>
                <img width="100%" :src="dialogImageUrl" alt="" />
              </el-dialog>
            </div>
          </el-form-item>
        </el-form>
        <div style="clear: both"></div>
      </div>

      <span slot="footer" class="dialog-footer">
        <el-button @click="dialogVisible = false">取 消</el-button>
        <el-button type="primary" @click="dialogVisible = false"
          >确 定</el-button
        >
      </span>
    </el-dialog>
  </div>
</template>

<script>
export default {
  data() {
    return {
      form: {
        detailPhoto: "",
      },
      //   控制查看大图
      dialogVisible1: false,
      // 上传图片地址
      httpurl: this.GLOBAL.httpurl,
      // 控制弹框
      dialogVisible: false,
      // 弹框
      formLabelAlign: {
        name: "",
        region: "",
        type: "",
      },
      //   表格数据
      tableData: [
        {
          officeName: "123",
        },
      ],
    };
  },
  methods: {
    //  配置 跳转链接
    jumpUrl(){
        this.$router.push({
            name:"noticeConfig"
        })
    },
    //   添加出现弹出框
    addMenu() {
      this.dialogVisible = true;
    },
    handleRemove(file, fileList) {
      this.hideUpload = fileList.length >= 1;
      console.log(file, fileList);
    },
    handlePictureCardPreview(file) {
      this.dialogImageUrl = file.url;
      this.dialogVisible1 = true;
    },
    // 上传图片类目
    beforeAvatarUpload(file) {
      const isJPG =
        file.type === "image/jpeg" ||
        file.type === "image/png" ||
        file.type === "image/jpg";
      if (!isJPG) {
        this.$message.error("只能上传图片");
      }
      //   const isSize = new Promise((resolve, reject) => {
      //     const width = 90;
      //     const height = 90;
      //     const _URL = window.URL || window.webkitURL;
      //     const img = new Image();
      //     img.onload = () => {
      //       const valid = img.width == width && img.height == height;
      //       valid ? resolve() : reject();
      //     };
      //     img.src = _URL.createObjectURL(file);
      //   }).then(
      //     () => {
      //       return file;
      //     },
      //     () => {
      //       layer.open({
      //         content: "图片尺寸限制为90 x 90",
      //         skin: "msg",
      //         time: 2, //1秒后自动关闭
      //       });
      //       // this.$notify({title: "错误",message: ,type: "error"});
      //       return Promise.reject();
      //     }
      //   );
      return isJPG;
    },
  },
};
</script>

<style scoped>
.box {
  display: flex;
  justify-content: center;
  width: 100%;
}
/deep/ .el-form {
  margin-left: 30px;
}
/deep/ .el-upload-list__item {
  transition: none !important;
}

</style>
<style>
.el-tabs__content{
    overflow: auto !important;
}
/deep/ .el-table--border::after, .el-table--group::after, .el-table::before{
    background-color: none !important;
}
</style>
<style>
.el-tabs__content{
    overflow: auto !important;
}
</style>